import React from 'react'
import {Link} from 'react-router-dom'
import {NavBar,List,Icon,Grid,Card,WhiteSpace} from 'antd-mobile';
import Footer from '../../components/Footer/index';
import './index.less'
const Item = List.Item;
const Brief = Item.Brief;
const data = Array.from(new Array(4)).map((_val, i) => ({
    icon: require(`../../resource/images/grid-${i+1}.png`),
    text: `name${i}`,
  }));
  
export default class Mine extends React.Component{
    constructor(props) {
        super(props);
    }
    
    handleSwitchTo=(el,index)=>{
        console.log(index);
        if(index === 0){
           this.props.history.push({pathname:'/mywealth'});
        }else if(index===1){
            this.props.history.push({pathname:'/equity'});
        }else if(index===2){
            this.props.history.push({pathname:'/growthvalue'});
        }
    }
    render(){
        console.log('MineProps',this.props);
        return(
            <div style={{marginBottom:'50px'}}>
                <NavBar
                    mode="light"
                    leftContent="返回"
                    icon={<Icon type="left" />}
                    onLeftClick={() =>{
                        const {history}=this.props;
                        history.push({pathname:'/'});
                    }}
                    rightContent={[
                        <Icon key="1" type="ellipsis" />,
                    ]}
                >个人中心</NavBar>

                <List renderHeader={() => ''} className="mine-list1">
                    <Item extra="签到领取权益" align="middle"
                     thumb={require('../../resource/images/logo.png')} 
                     multipleLine="true"
                     onClick={()=>console.log('onclick')}>
                        陈火华 
                        <Brief>
                            <Icon type="check-circle" size="xs" style={{verticalAlign:"middle"}}/>
                            星际会员
                            <Icon type="right" style={{verticalAlign:"middle"}}/>
                        </Brief>
                    </Item>
                </List> 
                    <Grid data={data} hasLine={false}
                        onClick={this.handleSwitchTo}    
                    >                                
                    </Grid>
                <div>
                <WhiteSpace />
                    <List renderHeader={() => '我的任务'} className="mine-list2">
                        <Item
                            extra={<span style={{color:'#ff6622'}}>已连续9天</span>}
                            thumb={require('../../resource/images/logo.png')} 
                            multipleLine
                            onClick={() => {}}
                        >
                        每日签到 <Brief>再签一天，获取100成长值</Brief>
                        </Item>
                        <Item
                            extra={<span style={{color:'#ff6622'}}>已邀请2人</span>}
                            thumb={require('../../resource/images/logo.png')} 
                            multipleLine
                            onClick={() => {}}
                        >
                        邀请好友 <Brief>再邀请一人，获取100成长值</Brief>
                        </Item>  
                        <Item
                            extra={'待完成'}
                            thumb={require('../../resource/images/logo.png')} 
                            multipleLine
                            onClick={() => {}}
                        >
                        完善资料 <Brief>完善资料，获取50成长值</Brief>
                        </Item> 
                        <Item
                            extra={'待完成'}
                            thumb={require('../../resource/images/logo.png')}  
                            multipleLine
                            onClick={() => {}}
                        >
                        绑定手机 <Brief>绑定手机，免费领取意外险</Brief>
                        </Item>       
                    </List>
                </div>
                <div>
                <WhiteSpace />
                <Card >
                    <Card.Header
                        title="活动中心"
                        extra={<span style={{fontSize:'12px'}}>全部活动<Icon type="right" size="xs" style={{verticalAlign:'middle'}}/></span>}
                    />
                    <Card.Body>
                        <div>
                            <img alt="" src={require(`../../resource/images/card-1.jpg`)}
                            style={{ width: '100%',height:'120px',borderRadius:'15px'}}/>
                        </div>
                    </Card.Body>
                   
                    </Card>
                </div>
                <div>
                <WhiteSpace />
                    <List>
                        <Item
                        thumb="https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png"
                        arrow="horizontal"
                        onClick={() => {}}
                        >我的权益</Item>
                        <Item
                        thumb="https://zos.alipayobjects.com/rmsportal/UmbJMbWOejVOpxe.png"
                        onClick={() => {}}
                        arrow="horizontal"
                        >
                       客服电话
                        </Item>
                        <Item
                        thumb="https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png"
                        onClick={() => {}}
                        arrow="horizontal"
                        >
                        帮助中心
                        </Item>
                    </List>
                </div>
                <Footer selectTab='mine'/>
            </div>
        );
    }
}